{extend name="main_mobile"}
{block name="style"}
<style type="text/css">
	.flex-lable{width: 100px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3 table-responsive p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search"
	  label-position="right">

	  	<div class="flex flex-center">
		  	<div>
			  	<el-select v-model="search.search_type" placeholder="请选择" class="w-80px">
				    <el-option key="uid"label="UID"value="uid"></el-option>
				    <el-option key="app_openid"label="APPOpenId"value="app_openid"></el-option>
				    <el-option key="pc_openid"label="PCOpenId"value="pc_openid"></el-option>
				    <el-option key="unionid"label="UnionId"value="unionid"></el-option>
				</el-select>
		  	</div>
		  	<div class="mx-1 flex-1">
		    	<el-input v-model="search.key" placeholder="请输入你想搜索的关键词" clearable></el-input>
		  	</div>
		    <el-button type="primary" @click="sendHtml">查询</el-button>
	  	</div>
	</el-form>
</div>
<div class="bg-white mb-2 p-3" v-for="(v,index) in tableData">
	<div class="flex flex-center">
	  	<div class="flex flex-center flex-1">
			<el-image
			  	v-if="v.headimgurl" 
			    style="width: 30px; height: 30px"
			    lazy
			    class="rounded-circle mr-2"
			    :src="v.headimgurl" 
			    :preview-src-list="[v.headimgurl]">
			</el-image>
	  		<div class="text-small">
		      	<div>{{v.nickname}}</div>
	      		<div>{{ v.uid }}</div>
	  		</div>
	  	</div>
	  	<div class="text-secondary text-small">ID:{{v.id}}</div>
	</div>
	<div class="flex flex-center pt-2">
		<div class="w-80px text-grey">性别</div>
		<div class="flex-1">
      		<span class="text-primary" 
      		v-if="v.gender=='男'">男</span>
      		<span class="text-danger"
      		v-else-if="v.gender=='女'">女</span>
      		<span class="text-secondary"
      		v-else>保密</span>
		</div>
	</div>
	<div class="flex flex-center pt-2">
		<div class="w-80px text-grey">APP</div>
		<div class="flex-1 text-break">{{ v.app_openid }}</div>
	</div>
	<div class="flex flex-center pt-2">
		<div class="w-80px text-grey">PC</div>
		<div class="flex-1 text-break">{{ v.pc_openid }}</div>
	</div>
	<div class="flex flex-center pt-2">
		<div class="w-80px text-grey">UnionId</div>
		<div class="flex-1 text-break">{{ v.unionid }}</div>
	</div>
	<div class="flex flex-center pt-2">
		<div class="w-80px text-grey">创建时间</div>
		<div class="flex-1 text-break">{{ v.create_time }}</div>
	</div>
	<div class="flex flex-center pt-2">
		<div class="w-80px text-grey">更新时间</div>
		<div class="flex-1 text-break">{{ v.update_time }}</div>
	</div>
</div>
<div class="table-responsive py-3 text-center">
	<el-pagination
	  background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="search.page"
      :page-sizes="[10,50,100,200]"
      :page-size="search.pageSize"
      layout="total, sizes, prev, next"
      :total="search.total">
    </el-pagination>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			labelPosition:'right',
			searchMore:false,
			search:{
				search_type:'uid',
				key:'{notempty name=":request()->get('uid')"}{:request()->get('uid')}{/notempty}',
				subscribe:'all',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			tableData:[],
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
	    methods: {
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			sendHtml(){
				this.search.page=1;
				this.initHtml();
			},
	      	initHtml() {
	      		var _this=this;
	      		_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
	    }
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{/block}